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METHOD AND SYSTEM FOR AUTOMATING CREATION OF MULTIPLE 
STYLESHEET FORMATS USING AN INTEGRATED VISUAL DESIGN 

ENVIRONMENT 

5 BACKGROUND OF THE INVENTION 

Technical Field 

The present invention relates generally to data 
integration technologies and, in particular, to techniques 
for authoring stylesheets in an XML application development 

10 environment. 

Description of the Related Art 

Organizations today are realizing substantial business 
efficiencies in the development of data intense, connected, 
software applications that provide seamless access to 

15 database systems within large corporations, as well as 

externally linking business partners and customers alike. 
Such distributed and integrated data systems are a 
necessary requirement for realizing and benefiting from 
automated business processes, yet this goal has proven to 

20 be elusive in real world deployments for a number of 

reasons including the myriad of different database systems 
and programming languages involved in integrating today' s 
enterprise back-end systems. 

Extensible Markup Language (XML) technologies are 

25 ideally suited to solve advanced data integration 

challenges, because they are both platform and programming 
language neutral, inherently transformable, easily stored 
and searched, and already in a format that is easily 
transmittable to remote processes via XML-based Web 

3 0 services technologies. XML is a subset of SGML (the 
Structured Generalized Markup Language) that has been 
defined by the World Wide Web Consortium (W3C) and has a 
goal to enable generic SGML to be served, received and 
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processed on the Web. XML is a clearly defined way to 
structure, describe, and interchange data. XML 
technologies offer the most flexible framework for solving 
advanced data integration applications. They do not, 
5 however, encompass the entire solution, in that a 

particular solution must still be implemented. Thus, XML 
technologies are not a standalone replacement technology, 
but rather a complementary enabling technology, which when 
bound to a particular programming language and database 

10 provide an elegant solution to a different problem. 

There are a number of ancillary technologies 
associated with XML. The extensible Stylesheet Language 
(XSL) consists of, among other things, the extensible 
Stylesheet Language Transformation (XSLT) , a standardized 

15 language for transforming XML documents to simple output 
forms such as HTML or WML, and the extensible Stylesheet 
Language Formatting Objects (XSLrFO) , an XML-based language 
for expressing advanced document layouts, employed by many 
popular formats including PDF and PostScript files. XSL 

20 decouples the contents of a document from its style (i.e., 
the document's layout and formatting) . This allows a 
designer to either change the document's style without 
affecting the content, or to change the content while 
preserving the style. The transformation process from one 

25 data format to another involves processing an XML document 
and an XSL stylesheet in an XSL processor, which results in 
the generation of a new output document. An example of 
altering a document's style while preserving the content is 
multi-channel publishing. Using XSL, a single source of 

3 0 XML content can be published into a wide variety of 

customized output media, such as HTML, WML, PostScript, 
PDF, or any other information format, through the 
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application of a stylesheet. An example of changing a 
document's content while preserving the style is 
internationalization and localization of resource files. A 
corporate website could internationalize its content in 
5 different languages such as German and Japanese , simply by 
translating the XML content and leaving the stylesheets 
unchanged . 

A given output format, such as HTML, PDF, PostScript, 
or the like, has its own associated XSLT stylesheet. Thus, 

10 for a given XML document, a first XSLT stylesheet must be 
created to generate HTML, a second XSLT stylesheet must be 
created to generate PDF, a third XSLT stylesheet must be 
created to generate WML, and so forth. Because of the need 
to have a unique stylesheet for every output format, 

15 authoring XSLT stylesheets is an extremely complex and 
time-consuming task. Many designers have little if any 
experience in this process, and a single stylesheet error 
often prevents the generation of any useful output. 
Visual data mapping tools have been created to 

20 accelerate the implementation of XSLT stylesheets. These 
tools, however, are only useful to author a particular 
stylesheet format (e.g., XSLT for transforming XML to 
HTML) . There remains a long felt need in the art for 
solutions that can be used to create stylesheets for 

25 multiple output formats. The present invention addresses 
this need. 
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BRIEF SUMMARY OF THE INVENTION 

It is a primary object of the present invention to 
provide a unified visual design environment in a data 
processing system to enable automatic generation of a 
5 plurality of stylesheets for different output formats. 

It is another more specific object of the invention to 
provide a system for automating writing of multiple 
different types of stylesheets through an integrated visual 
design environment that executes in a graphical user 

10 interface (GUI) of a data processing system. 

It is another object of the invention to provide for a 
single visual design environment in which a designer can 
create stylesheets through an intuitive user interface. 

A more specific object of the invention it to enable 

15 support for visual editing and generation of extensible 
Stylesheet Language (XSL) code, such as XSL code that 
enables XML content to be rendered into an HTML file, 
XSL:FO code that enables XML content to be rendered into a 
PDF file, and the like. With a single stylesheet design, 

20 developers can preview an output of a stylesheet 

transformation in one of several different formats, e.g., 
HTML, PDF, or others. 

In an embodiment, a method of and system for automatic 
writing of complex stylesheets preferably using an 

25 intuitive drag-and-drop user interface. By simply opening 
an existing structured data source (e.g., an XML document, 
an XML Schema, DTD, relational database, EDI document, a 
Web service, or the like) , an appropriate content model 
appears in a given display panel, preferably in a tree-like 

3 0 controller. The designer then selects an element or 

attribute that he or she desires to appear in an output and 
drags it from the given display panel to a main output 
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window. The designer then specifies how he or she would 
like the new node to be handled (e.g., as a new paragraph, 
image, table, or the like) . A stylesheet, sometimes 
referred to as a "meta stylesheet," is automatically 
5 generated (or is generated as the designer positions 
elements and attributes in the main output window) . 
Typically, the meta stylesheet is maintained as an internal 
data representation, although it may be displayable if 
desired. According to the invention, two or more 

10 stylesheets are generated from the meta stylesheet and from 
within the integrated visual design environment, with each 
of the stylesheets being useful for generating the document 
being designed in a given output format. Thus, in a 
representative example, the two or more stylesheets include 

15 a first XSLT stylesheet for transforming an XML document 
into HTML, and a second XSLT stylesheet to facilitate 
transformation of the XML document into PDF via XSL:FO. 
Each of the stylesheets may be automatically previewed in 
the GUI by simply selecting a preview tab. Another control 

20 tab may be used to preview the output document rendered 
through the respective stylesheet. 

The foregoing has outlined some of the more pertinent 
features of the invention. These features should be 
construed to be merely illustrative. Many other beneficial 

25 results can be attained by applying the disclosed invention 
in a different manner or by modifying the invention as will 
be described. 
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BRIEF DESCRIPTION OF THE DRAWINGS 

Figure 1 is a data processing system that includes the 
visual design environment of the present invention; 

Figure 2 is a simplified illustration of an integrated 
5 visual design environment in which multiple stylesheets may 
be created according to the present invention; 

Figure 3 illustrates a representative display of the 
visual design environment after the designer selects a 
schema; 

10 Figure 4 illustrates a popup menu that may be used by 

a designer to create a document outline in the design view; 

Figure 5 illustrates the design document in the visual 
design environment after the designer selects a given 
Create Contents option in the menu of Figure 4. 
15 Figure 6 illustrates an HTML preview of the document 

being designed; 

Figure 7 illustrates a PDF preview of the document 
being designed; 

Figure 8 illustrates a representative design document 
20 of Figure 5 after including an attribute as a data-entry 
device; and 

Figure 9 illustrates an HTML preview of the design 
document of Figure 8* 
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DETAILED DESCRIPTION OF AN EMBODIMENT 

The present invention is implemented in a data 
processing system such as shown in Figure 1. Typically, a 
data processing system 10 is a computer having one or more 
5 processors 12, suitable memory 14 and storage devices 16, 
input/output devices 18, an operating system 20, and one or 
more applications 22. One input device is a display 24 
that supports a window-based graphical user interface 
(GUI) . The data processing system includes suitable 

10 hardware and software components (not shown) to facilitate 
connectivity of the machine to the public Internet, a 
private intranet or other computer network. In a 
representative embodiment, the data processing system 10 is 
a Pentium-based personal computer executing a suitable 

15 operating system such as Windows 98, NT, W2K, or XP. Of 

course, other processor and operating system platforms may 
also be used. Preferably, the data processing system also 
includes an XML application development environment 26. A 
representative XML application development environment is 

20 xmlspy® from Altova, Inc. An XML development environment 
such as Altova xmlspy® facilitates the design, editing and 
debugging of enterprise-class applications involving XML, 
XML Schema, XSL/XSLT, SOAP, WSDL, and Web services 
technologies. The XML development environment typically 

25 includes an XML parser 28, and a set of one or more XSLT 
processors 30a-n. A given XSLT processor may be provided 
as a native application within the XML development 
environment or as a downloadable component. 

According to the present invention, the XML 

30 development environment includes given software code (a set 
of instructions) for use in creating an integrated visual 
design environment (VDE) 25 in which multiple XSLT 
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stylesheets 31a-n are generated. The visual design 
environment may be an adjunct to the data processing system 
GUI, or native to the GUI. In the past, it has not been 
possible to concurrently create different stylesheet 
5 formats within the same visual design space. The present 
invention solves this problem by providing the integrated 
visual design environment that is described below. If the 
XML development environment includes suitable XSLT 
processors, then the designer can also preview an output 

10 document using the generated stylesheet (s) . Thus, in a 

representative embodiment, the XML development environment 
26 includes an XSLT processor 3 0a for previewing an HTML 
document 32a (a document created by applying an XSLT 
stylesheet to an XML document) , an XSL:FO processor 3 0b for 

15 previewing a PDF document 32b (a document created by 

applying an XSL:FO stylesheet to the XML document), an WML 
processor 30c for previewing a WML document 32c (a document 
created by applying a WML stylesheet to the XML document) , 
and so forth. In the transformation process, according to 

20 instructions in the given XSLT stylesheet, the given 

processor 30 selects content from a data source (e.g., an 
XML document) and places it in the output document 
template, which is designed within a main output window as 
will be seen below. The selected content is usually placed 

25 as element content or as an attribute value. If the output 
document is intended for rendering on some output medium or 
as part of a processing chain that produces a document to 
be rendered, then the stylesheet can also be used to add 
presentation properties to the output document. As is 

30 well-known, the instructions for content selection, 

processing, placement, and formatting are all contained in 
the stylesheet. 
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The visual design environment of the present invention 
enables the creation of multiple different types of 
stylesheets within a single visual workspace. Figure 2 
illustrates a representative graphical user interface 200 
5 that includes the visual design environment comprising a 
number of graphical design elements. In a representative 
embodiment, the VDE comprises conventional control elements 
such as a menu bar 202 that contains a set of menus, and a 
toolbar 204 that contains icons for common commands. A 

10 main window 206 preferably includes a number of tabs. A 
design document tab 208 displays a document being designed 
together with its formatting. Dynamic components (i.e., 
content that comes from the XML document) preferably are 
displayed in terms of schema elements and attributes. 

15 Static components (e.g., images, non-XML text, etc.) 
preferably are actually displayed. Preferably, all 
components of the document are displayed with their 
formatting and layout properties. The main window 206 also 
includes a View Stylesheet tab 210 for each type of 

2 0 stylesheet format that may be created using the integrated 
visual design environment. Thus, in a representative 
example where the VDE is used to create both XSLT and 
XSL:FO stylesheets, there are two such tabs 210 with a 
first tab for viewing an XSLT stylesheet and a second tab 

25 for viewing an XSL:F0 stylesheet. Preferably, the 

stylesheets are not editable in this display format. The 
main window also preferably includes a Preview tab 212 for 
each stylesheet format. Selecting the preview tab 212 
preferably initiates a respective transformation process 

30 (using the underlying XSL processor) , with the output of 
the transformation then displayed in the main window. 
Continuing with the above example, there are two such 
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Preview tabs, one for the HTML output document, and one for 
the PDF output document. 

To facilitate the stylesheet design process, the 
integrated visual design environment also includes a schema 
5 window 214 that preferably displays a tree representation 
of a data source in terms of, for example: its elements and 
attributes, a list of all elements attributes for which 
global templates are possible, and optionally a list of all 
page layout components for a given output format (e.g., 

10 PDF) . As will be described, preferably elements and 
attributes are dragged from the schema window 214 and 
placed (i.e., dropped) at a required location in the design 
document. The VDE may also include a text style window 
216, and a block style window 218. The text style window 

15 preferably has a set of tabs, each with different groups of 
text formatting properties (such as font-weight and font- 
style) . When text of an element containing text is 
selected in the design document, text -formatting properties 
are applied to the text via the properties in the text 

20 style window 216. If desired, some text style properties 
may be available as icons in the toolbar. The block style 
window 218 preferably has a set of tabs, each with 
different groups of block formatting properties (such as 
spacing before and after a block) . When a block component 

25 is selected in the design document, block- formatting 

properties are applied to the block via the properties in 
the block style window 218. If the selected design 
document component is not a block, preferably the block 
style window is disabled. 

3 0 One of ordinary skill in the art will appreciate from 

the above description that the schema window 214 and the 
main window 206 facilitate an integrated visual design 
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environment according to the present invention. The schema 
window 214 is a first display panel in which a data source 
is displayed, and the main window is a second display panel 
for displaying a document being designed from the data 
5 source. Typically, the data source is an XML document, 

however, this is not a limitation of the present invention. 
The data source may, alternatively, be a Document Type 
Definition (DTD) , an XML Schema, a relational database, an 
Electronic Data Interchange (EDI) document, a Web service, 

10 or the like. 

A representative document design process is now 
described. Preferably, a data source is used as a starting 
point. In a representative embodiment, the data source is 
an XML document whose structure is displayed in the schema 

15 window. This provides the structural outline of the XML 
document in terms of its elements and attributes, which are 
loaded into and then available from the VDE. As used 
herein, the XML document is sometimes referred to as a 
working XML file. Preferably, the structure of the working 

20 XML file is displayed as a tree in the schema window. A 
document outline is then created in the main window. In 
particular, (in this illustrative example) XML content is 
selected by dragging an element or attribute from the 
schema tree. The dragged element/attribute is placed in 

25 the design document. The position where the 

element /attribute is dropped determines the location of 
that particular element/attribute in the design document. 
Because the actual content comes from the XML document and 
may vary depending on the XML content of the 

30 element /attribute, this type of content is known as dynamic 
content; its containing component is known as a dynamic 
component . 



- 11 - 



PATENT 



The above -described process creates what is sometimes 
referred to herein as a "meta" stylesheet, as this 
stylesheet is useful as a source of two or more output 
stylesheets (such as a first XSLT stylesheet through which 
5 an XML document or other data source is rendered in HTML, a 
second XSLT stylesheet through which the XML document or 
other data source is rendered in WML, and so forth) . The 
meta stylesheet typically is an internal data 
representation that can be saved in a given file format 

10 (e.g., an . sps format). Typically, the meta stylesheet may 
(but need not) conform with the XSLT programming language. 
According to the invention, the visual design environment 
includes code for generating, from the meta stylesheet, two 
or more stylesheets that are themselves useful in rendering 

15 the data source in two or more respective output formats 
using the respective stylesheets. As noted above, each of 
the stylesheets generated from the meta stylesheet may be 
previewed using the View Stylesheet tab, and (if an 
appropriate transformation engine is available) the output 

20 document rendered through that stylesheet may be viewed 
through the Preview tab. 

The following provides a more specific design example. 
In particular, a representative document design begins by 
having the designer select a schema. Figure 3 illustrates 

25 a representative display. This schema creates a tree of 

the OrgChart (Organization Chart) schema in the VDE schema 
window, as well as entries for global templates and page 
layout features below the schema tree. In this example, a 
(contents) placeholder for a root element is also created 

30 in the design document output window. A working XML file 
preferably is used to preview how an XML file based on the 
selected schema will be processed by the meta stylesheet. 
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As noted above, the inventive VDE preferably provides a set 
of two or more previews of the working XML file so that the 
designer can see how the meta stylesheet will process the 
XML. To assign a working XML file, the designer navigates 
5 using the appropriate control menus and selects a given XML 
file, such as NanonullOrg.xml, which is from a given 
folder. The working XML file, including its path, appears 
in the title bar. The user can then create a document 
outline in the design view as follows. In the schema 

10 window, the user expands the OrgChart element. The user 

then selects the /OrgChart /Name element and drags it in the 
design window. Preferably, this element is then positioned 
just after the (contents) placeholder. A blinking cursor 
preferably appears after the (contents) placeholder, and 

15 the dragged element becomes an arrow. When the mouse button 
is released, preferably a popup menu appears such as 
illustrated in Figure 4 . 

Assume now that the user selects the Create Contents 
option in the menu. The design document now looks as 

20 illustrated in Figure 5. The Name element with a 
(contents) placeholder is inserted. The (contents) 
placeholder represents the content of the Name element. 
When the XML file is processed with this meta stylesheet, 
the XML content of the Name element will be displayed. 

25 The user can preview the XML file in the manner 

previously described. The HTML preview provides an 
accurate preview of HTML output such as illustrated in 
Figure 6. A PDF preview is illustrated in Figure 7. 

The XSLT stylesheet for the HTML output format is 

30 illustrated below (® 2003 Altova GmbH) : 
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<?xml version="1.0" encoding="UTF-8"?> 
<xsl : stylesheet version="1.0" 
xml ns : xsl ="http : //www. w3 . org/1999/xSL/Transf orm" 
xml ns : nl="http : //www . xml spy . com/schemas/orgchart" 
5 xml ns : i po="http : //www . al tova . com/IPO" 

xml ns : xsi ="http : //www . w3 . org/2001/XMLSchema-i nstance"> 
<xsl : tempi ate match="/"> 
<html> 

<head /> 

10 <body> 

<xsl :for-each sel ect="nl:OrgChart"> 
<xsl :for-each select="nl:Name"> 

<xsl : apply- templates /> 
</xsl :for-each> 
15 </xsl :for-each> 

</body> 
</html > 
</xsl : tempi ate> 
</xsl :stylesheet> 

20 

The stylesheet for the PDF output format is 
illustrative below ( @ 2003 Altova GmbH) : 



<?xml version="1.0" encoding="UTF-8"?> 
<xsl : stylesheet version="1.0" 
xml ns : xsl ="http ://www. w3 . org/1999/XSL/Transf orm" 
xml ns : f o="http : //www . w3 . org/1999/XSL/Format" 
xml ns : nl="http : //www . xml spy . com/schemas/orgchart" 
xml ns : i po="http : //www. al tova . com/IPO" 
xml ns : xsi ="http : //www. w3 . org/2001/XMLSchema-i nstance"> 
<xsl : variable name="fo:layout-master-set"> 
<f o : 1 ayout-master-set> 

<fo: simple-page-master master-name="default-page" 
page-height="llin" page-width="8. Sin" 
margi n-1 eft="0 .6i n" margi n-ri ght="0 . 6i n"> 
<fo: region-body margi n-top="0.79in" 
margi n-bottom="0.79in" /> 
</fo:simple-page-master> 
</f o : 1 ayout-maste r-set> 
</xsl :variable> 
<xsl : tempi ate match="/"> 
<f o : root> 

<xsl:copy-of sel ect="$fo:layout-master-set" /> 
<fo: page-sequence master-reference="default-page" 
initial -page-number="l" format="l"> 
<f o : f 1 ow f 1 ow-name="xsl - regi on-body "> 
<fo:block> 

<xsl :for-each select="nl:0rgchart"> 
<xsl :for-each select="nl:Name"> 

<xsl : apply- templates /> 
</xsl :for-each> 
</xsl :for-each> 
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</fo:block> 
</f o : f 1 ow> 
</fo:page-sequence> 
</fo:root> 
5 </xsl : tempi ate> 

</xsl :stylesheet> 



As noted above, according to the present invention the 
visual design environment includes code for generating 

10 these distinct stylesheets (preferably from the meta 
stylesheet, although this intermediate step is not 
necessarily required) that render the data source to a 
particular output format (HTML and PDF in the given 
example) . The generated stylesheets can then be saved by 

15 selecting an appropriate menu command. Although not shown 
in detail, these stylesheets may then be exported for use 
in the data processing system or elsewhere in a 
conventional manner. 

As noted above, given element and attributes values 

20 may be included in the design document using the simple 
interface. Continuing with the example illustrated in 
Figure 5, assume that the element CompanyLogo (as shown in 
the XML) has an href attribute, the value of which gives 
the location of the logo image. Assume it is also desired 

25 to have specified what image should be used as the logo. 

In such case, the designer can create the href attribute as 
an input field, and the location of the image can be 
entered. To accomplish this, in the schema window, the 
designer places a cursor between start tags of OrgChart and 

30 Name, and presses an Enter key or command to put the Name 
element on a next line. An href attribute is then dragged 
from the schema window into the design document (the main 
window) . In this example, this attribute is dropped just 
after the OrgChart start tag. As a result, a popup menu 
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(such as illustrated in Figure 3) again appears and the 
designer (in this example) selects "Create Input Field". 
The design document then looks as indicated in Figure 8. 
Figure 9 illustrates the HTML preview for the document at 
5 this point in the design process. In this example, the 
href attribute has been created as an input field, while 
the Name element was created as (contents) . 

Although not illustrated in detail, one of ordinary 
skill will appreciate that the text and style blocks as 

10 well as other appropriate GUI commands and controls are 
included to facilitate production of the design document 
such as, among other things, including images, formatting 
the components, specifying text style properties, inserting 
tables, modifying table properties, inserting bookmarks and 

15 links, using conditional templates, and the like. Thus, 
for example, the processing of element content preferably 
is defined in the design document in the same way as the 
processing of attribute values is: drag the element from 
the schema tree, drop it into the design document as a 

20 component (of the meta stylesheet) , specify further 

XSLT/Xpath processing, and apply a required formatting. As 
noted above, formatting can be applied to a stylesheet 
component using the text formatting and block formatting 
windows. Text formatting typically is applied to text, and 

25 it typically includes font sizes, font weights, and font 
colors. Block formatting typically is applied to 
components that have been explicitly defined as blocks, and 
include background colors for the block, spacing around the 
block, and borders for the block. A component can be 

3 0 explicitly defined as a block by assigning it a predefined 
format. To apply formatting to a component, preferably the 
following mechanisms may be used, either alone or in 
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combination: applying a predefined format, applying text 
style properties, and/or applying block style properties. 

A skilled artisan will appreciate that the present 
invention provides numerous advantages over the prior art . 
5 According to the invention, a unified visual design 
environment automatically produces a plurality of 
stylesheets for different output formats, preferably 
without any external authoring tool. With prior art 
systems, if a designer wants to target a particular output 

10 format, he or she typically has to open a given HTML file, 
associate all elements from an XML tree, and then generate 
a stylesheet for use in that output format. He or she then 
has to do the same process all over again to target another 
output format (e.g., WML). These prior art approaches also 

15 typically require an external visual design tool to create 
the HTML page in the first place. 
Variants 

While the present invention has been described in the 
context of a visual design environment that includes a 

20 drag-and-drop interface, this is not a requirement of the 
invention. One of ordinary skill will appreciate that 
other techniques may be used to associate information from 
the data source representation into the output document 
format. Illustrative techniques include a clipboard, 

25 keyboard entry, an OLE data transfer mechanism, or the 
like . 

The particular orientation of the schema window, the 
main window and/or the text style and block style windows 
illustrated in Figure 2 are not meant be taken to limit the 
30 present invention. The visual design environment may 
juxtapose the schema window and the main window to 
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facilitate the drag-and-drop functionality in any 
convenient visual orientation or alignment. 

The principles of the present invention may also be 
generalized. As noted above, the u data source" from which 
5 the meta stylesheet is designed is not limited to an XML 
document. Various alternative data sources include, as 
noted above, an XML Schema, a DTD, a relational (or other 
structured) database, an EDI document, a Web service, or 
the like. In addition, one of ordinary skill will also 

10 appreciate that the XSLT stylesheets created by the 
invention may be generalized as any program code that 
renders the desired data (from the data source) to a 
particular output format. Thus, while an illustrative 
embodiment of the invention creates multiple XSLT 

15 stylesheets, this is not a limitation. The program code 
that renders the data to a particular output format may be 
generalized as any code written in a program language and 
selected from a set of available language templates 
including XSLT and others, such as: Java code, C# code, C++ 

20 code, Javascript, PHP, Perl, or any other convenient 

format. In this case the w meta" program code thus forms a 
superset, with the subset of this program code including 
the XSLT stylesheets described in the illustrative 
embodiment. A particular XSLT stylesheet may thus be 

25 considered an "instance" (e.g., a "version" or a 

"derivative") of the meta program code. The present 
invention thus provides a visual design tool that allows a 
designer or other user to generate multiple output formats 
from a single data source through an integrated visual 

3 0 design environment that (as an intermediate step) 

selectively generates an appropriate program code instance 
(a given XSLT stylesheet, given Java code, given C# code, 
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etc.) that renders the data to the particular output 
format . 

Having described our invention, what we claim is as 
follows. 
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